<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			html,body{height:100%;}
			#template{display: none;}
			#mask{
				position:fixed;
				background-color:rgba(0,0,0,.5);
				width: 100%;
				height:100%;
				top:0;
				left:0;
				display: none; 
			}
			#popup p{
				line-height:42px;
			}
			#popup{
				width:550px;
				padding:30px;
				background-color:#fff;
				border-radius:20px;
				position:fixed;
				top:50%;
				z-index:1;
				left:50%;
				transform:translate(-50%,-50%);
				display: none;
			}
			#close{
				position:absolute;
				top:5px;
				right:15px;
				color:#999;
				font-size: 24px;
				cursor:pointer;
				transition:all .5s;
			}
			#close:hover{
				transform: rotate(90deg);
			}
			.nav li{
				float:left;
				list-style:none;
			}
		</style>
	</head>
	<body>
		
		<h3>用户：<span id="username"></span><a href="/login.html"  id="outlogin">[退出登录]</a></h3>
		<ul class="nav">

			<li><a href="/index.html">学生管理</a></li>
			<li><a href="/score.html">成绩管理</a></li>
		</ul>
		<div style="float:right;margin-right:15px;margin-top: 15px;">
			<button class="btn btn-primary" id="popupshow">+添加学生</button>
		</div>
		
		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>所在城市</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr id="template">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<button class="btn btn-danger delete">删除学员</button>
						<button class="btn btn-primary edit">修改信息</button>
					</td>
				</tr>
			</tbody>
		</table>

		
		
		<div id="popup">
			<span id="close"> × </span>
			<div class="form-group">
				<label for="newName">姓名</label>
				<input type="text" class="form-control" id="newName" placeholder="请输入学生姓名">
			</div>
			<div class="form-group">
				<label for="newAge">年龄</label>
				<input type="number" class="form-control" id="neweAge" placeholder="请输入学生年龄">
			</div>
			<div class="form-group">
				<label for="newCity">所在城市</label>
				<select name="" id="province"></select>
				<select name="" id="city"></select>
				<select name="" id="area"></select>
			</div>
			<div class="form-group">
				<label class="radio-inline">
				  <input type="radio" name="sex" id="boy" value="option1"> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="sex" id="girl" value="option2" checked> 女
				</label>
			</div>
			<button class="btn btn-primary" id="send">确认添加</button>
			<button class="btn btn-default" id="cancel">取消</button>

		</div>
		<div id="mask">
		</div>
		<script src="citys.js"></script>
		<script src="common.js"></script>
		<script src="jquery.min.js"></script>
		<script>

			// 检测用户是否登录
			let username = sessionStorage.getItem("username");
			// 如果没有登录数据，就拜拜
			if(!username){
				location.href = `${url}/login.html`
			}
			$("#username").html(username)


			// 退出登录
			$("#outlogin").click(()=>{
				sessionStorage.clear();
			})



			let province = $("#province");
			let city = $("#city");
			let area = $("#area");

			// 初始化省市区下拉菜单部分
			citys.forEach(item=>{
				let option = $(`<option>${item.provinceName}</option>`)
				province.append(option)
			})

			province.change(function(){
				// 先清空原来的数据
				city.empty();
				area.empty();

				// selectedIndex返回下拉选择菜单的当前选中的那个option的下标
				cityList = citys[this.selectedIndex].mallCityList;
				// 更新市中的选择项
				cityList.forEach(item=>{
					let option = $(`<option>${item.cityName}</option>`)
					city.append(option)
				})
				// 更新区中的选择项
				cityList[0].mallAreaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
				
			})

			city.change(function(){
				// 先清空原来的数据
				area.empty();
				let areaList = cityList[this.selectedIndex].mallAreaList;
				// 更新区中的选择项
				areaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
			})


			let mask = $("#mask");
			let popup = $("#popup");

			$.ajax({
				url:`${url}/getData`,
				success(data){
					var data = JSON.parse(data);
					data.forEach(item=>{
						let newItem = $("#template").clone(true);
						newItem.appendTo($(".table tbody")).attr("id","")
						newItem.find("td").eq(0).html(item.id)
						newItem.find("td").eq(1).html(item.name)
						newItem.find("td").eq(2).html(item.sex?"男":"女")
						newItem.find("td").eq(3).html(item.age)
						newItem.find("td").eq(4).html(item.city)
					})
				}
			})
			$('.delete').click(function(){
				if(confirm("真要删吗？")){
					$.ajax({
						url:`${url}/delete`,
						data:{
							id:$(this).closest("tr").find("td").eq(0).html()
						},
						success(data){
							if(data === "success"){
								history.go(0)
							}
							else{
								alert("删除操作失败!")
							}
						}
					})
				}
			})

			$("#send").click(function(){
				$.ajax({
					url:`${url}/addData`,
					data:{
						name:$("#newName").val(),
						age:$("#neweAge").val(),
						city:province.val() + city.val() + area.val(),
						sex:$("#boy")[0].checked ? 1 : 0,
					},
					success(data){
						if(data === "success"){
							alert("添加成功")
							history.go(0);
						}
						else{
							alert("添加失败")
						}
					}
				})
			})



			// 添加学生弹出层部分
			$("#popupshow").click(function(){
				mask.fadeIn();
				popup.fadeIn();
			})
			$("#cancel").click(function(){
				mask.fadeOut();
				popup.fadeOut();
			})
			$("#close").click(function(){
				mask.fadeOut();
				popup.fadeOut();
			})


		</script>
	</body>
</html>
